<template>
	<view class="page">
		<view class="group_2">
			<view class="group_3">
				<!-- <u-tabs :list="tabsList" lineColor="#FE6146 " :activeStyle="{
					  color: '#FE6146 ',
					}" :inactiveStyle="{
					  color: '#c2c1c1',
					}" :lineWidth="30" :current="currentTab" @click="onClickTab" /> -->
				<view class="good-box">
					<view class="good-list">
						<view class="good-item" v-for="(item,index) in venuelist" :key="index" v-if="currentTab == 0">
							<view class="flex-align" @click="onChangelist(item)">
								<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
									v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
								<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
									src="https://img.yzcdn.cn/vant/cat.jpeg" />
								<view class="info">
									<view class="name">{{item.venue_name}}</view>
									<view class="address">{{item.address ? item.address :''}}</view>
									<view class="address">{{item.create_at}}</view>
								</view>
							</view>
							
						</view>
						<!-- <view class="good-item" v-for="(item,index) in venuelist" :key="index" v-if="currentTab == 1">
							<view class="flex-align" @click="onChangelist(item)">
								<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
									v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
								<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
									src="https://img.yzcdn.cn/vant/cat.jpeg" />
								<view class="info">
									<view class="name">{{item.venue_name}}</view>
									<view class="flex-align" v-if="item.project_list != ''">
										<view class="tag" v-if="item.project_list[0].name != ''">
											{{item.project_list[0].name}}
										</view>
										<view class="tag"
											v-if="item.project_list[1].name != '' && item.project_list[1]">
											{{item.project_list[1].name}}
										</view>
										<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
											{{item.project_list[2].name}}
										</view>
									</view>
									<view class="address">{{item.address}}</view>
								</view>
							</view>
							<view class="good-data">
								<view class="good-time">
									许可截止日期:2024/12/15 12:00:00
								</view>
								<view class="good-btn">
									申请续费
								</view>
							</view>
						</view>
						<view class="good-item" v-for="(item,index) in venuelist" :key="index" v-if="currentTab == 2">
							<view class="flex-align" @click="onChangelist(item)">
								<van-image width="124rpx" height="124rpx" radius="10rpx" fit="cover"
									v-if="item.venue_thumb != ''" :src="item.venue_thumb" />
								<van-image v-else width="124rpx" height="124rpx" radius="10rpx" fit="cover"
									src="https://img.yzcdn.cn/vant/cat.jpeg" />
								<view class="info">
									<view class="name">{{item.venue_name}}</view>
									<view class="flex-align" v-if="item.project_list != ''">
										<view class="tag" v-if="item.project_list[0].name != ''">
											{{item.project_list[0].name}}
										</view>
										<view class="tag"
											v-if="item.project_list[1].name != '' && item.project_list[1]">
											{{item.project_list[1].name}}
										</view>
										<view class="tag" v-if="item.project_list[2].name != ''&& item.project_list[2]">
											{{item.project_list[2].name}}
										</view>
									</view>
									<view class="address">{{item.address}}</view>
								</view>
							</view>
							<view class="good-data">
								<view class="good-time">
									许可截止日期:2024/12/15 12:00:00
								</view>
								<view class="good-btn">
									选择套餐
								</view>
							</view>
						</view> -->
					</view>
				</view>

			</view>
			<!-- <view class=""
				style="position: fixed;width: 100%;height: 16vw;background-color: #fff;z-index: 999;bottom: 0;">
				<button class="button_3" @click="onClick">
					联系客服入驻
				</button>
			</view> -->
			<view class="" style="width: 100%;height: 120rpx;"></view>
			<view class="d-flex flex-row justify-space-between justify-center align-center"
				style="position: fixed;bottom: 0;height: 120rpx;background-color: #fff;width: 100%;padding: 0 8%;z-index: 999;">
				<view 
					style="width: 100%;height: 80rpx;background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));color: #ffffff;font-size: 24rpx;text-align: center;border-radius: 35rpx;line-height: 80rpx;">
					开户续费
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const venues = require("@/api/venues/venues.js");
	export default {
		data() {
			return {
				venuelist: [], //场馆列表
				tabsList: [
					{
						name: "上线中"
					},
					{
						name: "下线中"
					}
				],
				currentTab: 0,
			}
		},
		onLoad(options) {
			// this.type = options.type
			// // 场馆数组
			// var data = uni.getStorageSync("wqzdy");
			// var items = JSON.parse(data)
			// this.venuelist = items
			// this.itemChooselist = this.venuelist[0]
			this.getVenueList()
		},
		methods: {
			async getVenueList() {
				let params = {};
				let res = await venues.getVenueList(params);
				if (res.code === 1) {
					this.venuelist = res.data
				}
			},
			onChangelist(item){
				uni.navigateTo({
					url:'./details?pid=' + item.id + "&venue_name=" + item.venue_name,
				})
			},
			onClickTab({
				index
			}) {
				this.currentTab = index;
				this.getVenueList()
			},
			onClick(){
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #ffffff;

		.group_3 {




			/deep/ .good-box {
				height: 90vh;
				padding: 0px 30rpx;
				display: flex;
				flex-direction: column;

				.title {
					color: #000;
					font-size: 30rpx;
					font-weight: 700;
					margin-top: 40rpx;
				}

				.van-radio__label {
					line-height: inherit;
				}

				.good-list {
					flex: 1;
					height: 0;
					overflow: auto;

					.good-data {
						margin-top: 10rpx;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center; 
						.good-time{
							font-size: 26rpx;
							color: #333333;
						}
						.good-btn{
							width: 173rpx;
							height: 60rpx;
							background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
							border-radius: 60rpx 60rpx;
							color: rgba(255, 255, 255, 1);
							font-size: 28rpx;
							text-align: center;
							line-height: 60rpx;
						}
					}

					.good-item {
						margin-top: 30rpx;
						box-shadow: 0px 3px 6px 1px rgba(23, 106, 180, 0.2);
						display: flex;
						flex-direction: column;
						padding: 15rpx;

						.info {
							margin-left: 25rpx;

							.address {
								color: #fff;
								// padding-top: 20rpx;
								padding-right: 30rpx;
								margin-bottom: 10rpx;
								// height: 40rpx;

								&-name {
									font-size: 34rpx;
									font-weight: 700;
									line-height: 34rpx;
								}

								&-desc {
									margin-top: 18rpx;
									font-size: 22rpx;
									line-height: 22rpx;
								}

								.exchange {
									width: 100rpx;
									height: 100rpx;
									border-radius: 50%;
									background-color: rgba(0, 0, 0, 0.2);
									color: rgb(234, 248, 248);
									font-size: 24rpx;
								}
							}

							.name {
								color: rgb(51, 51, 51);
								font-size: 30rpx;
								font-weight: 500;
								margin-bottom: 10rpx;
							}


							.tag {
								color: rgb(4, 179, 90);
								font-size: 24rpx;
								font-weight: 500;
								padding: 0px 10rpx;
								margin-right: 20rpx;
								background-color: rgba(4, 179, 90, 0.2);
								border-radius: 4rpx;

								&:nth-of-type(2) {
									color: rgb(236, 70, 246);
									background-color: rgba(236, 70, 246, 0.2);
								}
							}

							.address {
								// margin-top: 10rpx;
								color: rgb(136, 136, 136);
								font-size: 22rpx;
							}
						}

					}
				}
			}
		}

		.button_3 {
			width: 90%;
			height: 80rpx;
			position: absolute;
			bottom: 20rpx;
			background: linear-gradient(0deg, rgba(214, 53, 53, 0.9), rgba(255, 64, 64, 0.93), rgba(250, 142, 142, 0.93));
			border-radius: 80rpx 80rpx;
			margin-left: 5%;
			color: rgba(255, 255, 255, 1);
			font-size: 28rpx;
			font-family: PingFang-SC-Medium;
		}
	}
</style>